<template>
  <div>
    <el-dialog :title="title" :visible.sync="opens" width="1200px" append-to-body :before-close="close">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-divider content-position="center">订单信息</el-divider>
        <el-row>
          <el-col :span="8">
            <el-form-item label="工作号" prop="job_number">
              <el-select v-model="form.job_number" filterable placeholder="请选择工作号" clearable style="width: 100%" @change="jobNumberChange" disabled>
                <el-option
                  v-for="(dict,index) in numberAll"
                  :key="index"
                  :label="dict"
                  :value="dict"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="委托日期">
              <el-input v-model="order.entrust_date" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="内部类型">
              <el-input v-model="order.inside_type_name" disabled />
<!--              <el-select v-model="order.inside_type" placeholder="内部类型" clearable style="width: 100%" disabled>-->
<!--                <el-option label="测试数据" value="1" />-->
<!--                <el-option label="测试数据2" value="2" />-->
<!--                <el-option label="测试数据3" value="3" />-->
<!--              </el-select>-->
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="主单号">
              <el-input v-model="order.main_doc_no" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="分单号">
              <el-input v-model="order.sub_order_No" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="体积">
              <el-input v-model="order.volume" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="center">费用录入</el-divider>
        <el-row>
          <el-col :span="8">
            <el-form-item label="费用代码" prop="expense_code">
              <el-select v-model="form.expense_code" placeholder="请选择费用代码" clearable style="width: 100%" @change="expenseCodeChange" disabled>
                <el-option
                  v-for="(dict,index) in expenseAll"
                  :key="index"
                  :label="dict.code"
                  :value="dict.code"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="费用名称" prop="expense_name">
              <el-input v-model="form.expense_name" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="费用类型">
              <el-select v-model="form.expenses_type" placeholder="请选择费用类型" style="width: 100%;" @change="expensesTypeChange" disabled>
                <el-option label="应收" value="15" />
                <el-option label="应付" value="16" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="结算代码" prop="settlement_code">
              <el-select v-model="form.settlement_code" placeholder="请选择结算代码" clearable style="width: 100%" @change="settlementCodeChange" disabled>
                <el-option
                  v-for="(dict,index) in options"
                  :key="index"
                  :label="dict.account_code"
                  :value="dict.account_code"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="结算名称" prop="settlement_name">
              <el-input v-model="form.settlement_name" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="单价" prop="unit_price">
              <el-input v-model="form.unit_price"  @input="priceChange" disabled/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="数量" prop="quantity">
              <el-input v-model="form.quantity"  @input="priceChange" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="金额" prop="money">
              <el-input v-model="form.money" type="number" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="汇率" prop="exchange_rate">
              <el-select v-model="form.exchange_rate" placeholder="请选择汇率" clearable style="width: 100%" disabled>
                <el-option
                  v-for="(dict,index) in rateAll"
                  :key="index"
                  :label="'源币种('+dict.source_currency_text+')--目标币种('+dict.target_currency_text+')--汇率('+dict.rate+')'"
                  :value="dict.rate"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="币种" prop="currency">
              <el-select v-model="form.currency" placeholder="请选择币种" clearable style="width: 100%" disabled>
                <el-option
                  v-for="(dict,index) in currencyAll"
                  :key="index"
                  :label="dict.currency_name"
                  :value="dict.currency_num"
                />
              </el-select>
              <!--              <el-input v-model="form.currency" />-->
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="费用标题" prop="cost_title">
              <el-input v-model="form.cost_title" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="账单号" prop="account_number">
              <el-input v-model="form.account_number" disabled/>
            </el-form-item>
          </el-col>

        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="发票号" prop="invoice_no">
              <el-input v-model="form.invoice_no" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开票日期" prop="invoicing_date">
              <el-date-picker v-model="form.invoicing_date" value-format="yyyy-MM-dd" type="date" placeholder="开票日期" style="width: 100%;" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="本位币金额" prop="base_currency_money">
              <el-input v-model="form.base_currency_money" type="number" disabled/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="税金" prop="taxes">
              <el-input v-model="form.taxes" type="number" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="支票号" prop="cheque">
              <el-input v-model="form.cheque" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="请款单号" prop="request_funds">
              <el-input v-model="form.request_funds" disabled/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row />

        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="remarks">
              <el-input v-model="form.remarks" type="textarea" disabled/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row style="top: 30px;margin-bottom: 30px;text-align:center;">
          <el-col :span="24">
<!--            <el-button type="primary" size="medium" @click="submitForm('form')">{{ title }}</el-button>-->
            <el-button size="medium" @click="close()">取消</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { expenseAdd, expenseEdit, getJobNumber, getExpensetype, getJobNumberInfo } from '@/api/settlement'
import { getProvider, getCurrency , getRate } from '@/api/basics'
export default {
  name: 'Detail',
  props: {
    opens: {
      type: Boolean
    },
    form: {
      type: Object
    },
    title: {
      type: String
    }
  },
  data() {
    return {
      // 工作号
      numberAll: [],
      // 费用代码
      expenseAll: [],
      //货币
      currencyAll: [],
      // 订单详情
      order: {},
      // 结算代码
      options: [],
      //汇率
      rateAll: [],
      rules: {
        // company_code: [
        //   { required: true, message: '请填写公司代码', trigger: 'blur' }
        // ],
        // name_c: [
        //   { required: true, message: '请填写中文名称', trigger: 'blur' }
        // ]
      }
    }
  },
  watch: {
    'opens': function(newValue, oldValue) {
      if (newValue === true && this.title === '详情') {
        this.jobNumberChange(this.form.job_number)
      }
    }
  },
  created() {
    this.getJobNumber()
    this.getExpensetype()
    this.getCurrency()
    this.getRate()
    this.expensesTypeChange()
  },
  methods: {
    getRate() {
      getRate().then(response => {
        if (response.code === 10000) {
          this.rateAll = response.data
        }
      })
    },
    getCurrency() {
      getCurrency().then(response => {
        if (response.code === 10000) {
          this.currencyAll = response.data
        }
      })
    },
    getJobNumber() {
      getJobNumber().then(response => {
        if (response.code === 10000) {
          this.numberAll = response.data
        }
      })
    },
    getExpensetype() {
      // 费用代码
      getExpensetype().then(response => {
        if (response.code === 10000) {
          this.expenseAll = response.data
        }
      })
    },
    submitForm(formName) {
      const that = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (that.title === '添加') {
            this.add()
          } else {
            this.edit()
          }
        } else {
          return false
        }
      })
    },
    add() {
      const that = this
      expenseAdd(that.form).then(response => {
        if (response.code === 10000) {
          that.$message.success(response.message)
          that.$parent.getList()
          that.$emit('update:open', false)
        }
      })
    },
    edit() {
      const that = this
      expenseEdit(that.form).then(response => {
        if (response.code === 10000) {
          that.$message.success(response.message)
          that.$parent.getList()
          that.$emit('update:open', false)
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    close() {
      this.$emit('update:opens', false)
    },
    jobNumberChange(value) {
      getJobNumberInfo({ job_number: value }).then(response => {
        if (response.code === 10000) {
          this.order = response.data
        }
      })
    },
    expenseCodeChange(value) {
      this.expenseAll.find(item => {
        if (value === item.code) {
          this.form.expense_name = item.name
        }
      })
    },
    expensesTypeChange(value) {
      this.form.settlement_code = undefined
      this.form.settlement_name = undefined
      getProvider({ role: value }).then(response => {
        if (response.code === 10000) {
          this.options = response.data
        }
      })
    },
    settlementCodeChange(value) {
      this.$forceUpdate()
      this.options.find(item => {
        if (value === item.account_code) {
          this.form.settlement_name = item.account_name
        }
      })
    },
    priceChange() {
      this.form.money = parseFloat(this.form.unit_price) * parseFloat(this.form.quantity)
    }
  }
}
</script>

